// 引入 vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import Home from '@/page/Home'
import About from '@/page/About'
import Message from '@/page/Message'
import News from '@/page/News'
import MsgDetail from '@/page/MsgDetail'
// 声明使用vue-router
Vue.use(VueRouter)
// 暴露一个vue-router实例对象
export default new VueRouter({
    routes: [
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'message',
                    component: Message,
                    // 命名路由 定义一个name 使用router-Link 修改路径时，to属性可以写一个对象，通过name直接定位到与name匹配的path路径
                    name: 'message',
                    children: [
                        {
                            path: 'msgdetail/:id',
                            component: MsgDetail,
                            name: 'msgdetail',
                            props(route) {
                                return {
                                    content: route.query.content
                                }
                            }
                        }
                    ]
                },
                {
                    path: 'news',
                    component: News,
                    name: 'news'
                },
                {
                    path: '',
                    // 使用重定向，默认展示二级路由的message组件
                    redirect: 'message'
                }
            ]
        },
        {
            path: '/about',
            component: About,
        },
        {
            path: '/',
            // 路由重定向
            redirect: '/home'
        },
    ]
})
